<template>
  <div>
    <Card>
      <p slot="title">
        基本设置
      </p>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="200">
        <FormItem label="网站名称" prop="title">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.title" placeholder="请输入网站名称"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="网站LOGO">
          <Row>
            <Col span="12">
              <div class="demo-upload-list" v-if="formValidate.logo">
                <template v-if="formValidate.logo">
                  <img :src="formValidate.logo">
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(formValidate.logo)"></Icon>
                  </div>
                </template>
              </div>

              <div class="upload-btn" @click="imageModal.isShow = !imageModal.isShow">
                <Icon type="ios-camera" size="20"></Icon>
              </div>

            </Col>
          </Row>
        </FormItem>

        <FormItem label="网站描述" prop="description">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.description" placeholder="请输入网站描述"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="联系人" prop="contact">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.contact" placeholder="请输入联系人"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="联系电话" prop="phone">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.phone" placeholder="请输入联系电话"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="联系地址" prop="address">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.address" placeholder="请输入联系地址"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="版权信息" prop="copyright">
          <Row>
            <Col span="12">
              <Input v-model="formValidate.copyright" placeholder="请输入版权信息"></Input>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="状态" prop="status">
          <RadioGroup v-model="formValidate.status">
            <Radio :label="0">关闭</Radio>
            <Radio :label="1">开启</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
      </Form>
    </Card>
    <ImageModal v-model="imageModal.isShow" @get-selection="imageSelect" :limit="1"></ImageModal>
    <Modal title="图片预览" v-model="visible" :styles="{top: '20%'}">
      <img :src="imgUrlView" v-if="visible" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
import ImageModal from '@/components/img-modal'
import Icons from '_c/icons'
import { setting, editSetting } from '@/api/system'

export default {
  name: 'setting',
  components: {
    Icons,
    ImageModal
  },
  data () {
    return {
      imageModal: {
        isShow: false
      },
      imgUrlView: '',
      visible: false,
      formValidate: {
        id: 0,
        title: '',
        logo: '',
        description: '',
        contact: '',
        phone: '',
        address: '',
        copyright: '',
        status: 1
      },
      ruleValidate: {
        title: [
          { required: true, message: '网站名称不能为空', trigger: 'blur' },
          { type: 'string', max: 64, message: '网站名称最大长度为64', trigger: 'blur' }
        ],
        description: [
          { type: 'string', max: 64, message: '网站描述最大长度为255位', trigger: 'blur' }
        ],
        contact: [
          { type: 'string', max: 16, message: '联系人最大长度为16位', trigger: 'blur' }
        ],
        phone: [
          { type: 'string', max: 15, message: '联系电话最大长度为15位', trigger: 'blur' }
        ],
        address: [
          { type: 'string', max: 64, message: '联系地址最大长度为64位', trigger: 'blur' }
        ],
        copyright: [
          { type: 'string', max: 128, message: '版权信息最大长度为128位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 预览
    handleView (item) {
      this.imgUrlView = item
      this.visible = true
    },
    imageSelect (imageSelection) {
      this.formValidate.logo = imageSelection[0].thumb
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          editSetting(this.formValidate.id, this.formValidate).then(res => {
            if (res.code === 1) {
              this.$Message.success(res.msg)
            } else {
              this.$Message.error(res.msg)
            }
          })
        } else {
          this.$Message.error('操作失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  },
  mounted () {
    setting().then(res => {
      this.formValidate = res.data
    })
  }
}
</script>

<style>
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  .upload-btn {
    background: #fff;
    border: 1px dashed #dddee1;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease;
    width: 58px;
    height:58px;
    line-height: 58px;
    display: inline-block;
  }
</style>
